/*
 * @Author: xiaosihan 
 * @Date: 2024-07-23 21:31:04 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 20:48:55
 */


import partsApi from "@api/partsApi";
import { PartData } from "@type";
import { Button, Tabs, Tooltip } from "antd";
import { get } from "lodash";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import PCHeader from "../PCHeader/PCHeader";
import styles from "./partsDetails.module.less";
import partsDetailsRender from "./partsDetailsRender";
import Annotations from "./Annotations/Annotations";
import Jooiner from "./Joiner/Joiner";
import dayjs from "dayjs";
import UploadProgressModal from "../UpdataModel/UploadProgressModal/UploadProgressModal";
import uploadProgressModalStore from "../UpdataModel/UploadProgressModal/uploadProgressModalStore";
import utils from "@utils";
import { CloseOutlined } from "@ant-design/icons";


interface Iprops {
    children?: ReactNode
}

// 零件详情
export default function PartsDetails() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [partData, setPartData] = useState<PartData>({
        attachments: [],
        createBy: "",
        createTime: "",
        id: "",
        name: "",
        size: "",
        status: "",
        thumbnailUrl: "",
        typeId: "",
        typeName: "",
        updateBy: "",
        updateTime: "",
        url: "",
        userId: "",
        userName: "",
        projectId: "",
        userAvatarUrl: "",
        userPhone: ""
    });
    const parame = useParams<{ id: string }>();

    const getPartInfo = () => {
        partsApi.get_part_info(parame.id)
            .then(res => {
                const partData = get(res, ["data"]);
                setPartData(partData);
                partsDetailsRender.loadModel(partData.url);
            })
    }

    useEffect(() => {
        getPartInfo();
    }, []);



    useEffect(() => autorun(() => {

    }), []);

    return (
        <div className={styles.partsDetails} >
            <PCHeader />
            <div className={styles.id} >查看批注</div>
            <div className={styles.container} >
                <div className={styles.left} >
                    <div className={styles.renderContainer} ref={dom => partsDetailsRender.setContainer(dom)} ></div>

                    <div className={styles.title} >附件文件</div>
                    <div className={styles.files} >
                        <div className={styles.total} >共{partData.attachments.length}个附件文件</div>
                        {
                            partData.attachments.map((a, i) => {
                                return (
                                    <div className={styles.file_list} key={a.id} >
                                        <div className={styles.file_name} >
                                            <span className={styles.xxx} >{i + 1}、</span>
                                            <span className={styles.name} >
                                                {(a.name || "").replace(/\w+$/, "")}
                                            </span>
                                            <span className={styles.suffix} >
                                                {utils.getSuffix(a.name)}
                                            </span>
                                            <Tooltip
                                                rootClassName={styles.delete_tip}
                                                placement="right"
                                                mouseEnterDelay={0}
                                                trigger={["click"]}
                                                title={
                                                    <Button
                                                        danger
                                                        type="primary"
                                                        size="small"
                                                        onClick={async () => {
                                                            uploadProgressModalStore.deleteAttachment(a.id);
                                                            getPartInfo();
                                                        }}
                                                    >确认删除</Button>
                                                }
                                            >
                                                <CloseOutlined className={styles.close} style={{ margin: "13px 4px" }} />
                                            </Tooltip>

                                            <span className={styles.size} >{a.size}</span>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        <div className={styles.add_btn} >
                            <Button
                                type="primary"
                                className={styles.add}
                                onClick={async () => {
                                    const files = await utils.selectFiles("*");
                                    uploadProgressModalStore.setOpen(true);
                                    uploadProgressModalStore.setFileName("")
                                    uploadProgressModalStore.setProgress(1);
                                    uploadProgressModalStore.setModelId(parame.id);
                                    uploadProgressModalStore.setUploadAttachmentList([]);
                                    await uploadProgressModalStore.addUploadAttachmentList(files);
                                    while (uploadProgressModalStore.open) {
                                        await new Promise(resolve => setTimeout(resolve, 200));
                                    }
                                    getPartInfo();
                                }}
                            >增加附件文件</Button>
                        </div>
                    </div>

                </div>

                {/* 上传进度弹窗 */}
                <UploadProgressModal />

                <div className={styles.right}>
                    <div className={styles.title} >{partData.name}</div>
                    <div className={styles.data} >时间 : {dayjs(partData.createTime).format("YYYY-MM-DD HH:mm:ss")}</div>
                    <div className={styles.user} >作者 : {partData.userName}</div>
                    {/* <div className={styles.joiner} >参与:</div> */}
                    <Tabs
                        defaultActiveKey="1"
                        items={[
                            { key: '1', label: '批注', className: styles.tabs, children: <Annotations modelId={parame.id || ""} /> },
                            { key: '2', label: '成员', className: styles.tabs, children: <Jooiner modelId={parame.id || ""} /> },
                        ]}
                        onChange={(key) => { }}
                    />
                </div>

            </div>
        </div>
    );

}